<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃鸡练习</title>
    <style>
        li {
            list-style: none;
        }

        .color{
            color:rgb(25, 39, 230);
        }
        .btn {
			width: 100px;
			height: 36px;
			border: 0;
			background: linear-gradient(to left, rgb(235, 147, 135), rgb(155, 132, 0));
			color: white;
			width: 100px;
			height: 50px;
			border: 2px solid deeppink;

			border-radius: 40%;
		}
    </style>
</head>

<body>
    <div>
        <button  class = "btn" id="btn1">将吃鸡放到所有城市后面</button>
        <button  class = "btn" id="btn2">将吃鸡放到所有城市前面</button>
        <button  class = "btn" id="btn3">将吃鸡放到上海的后面</button>
        <button  class = "btn" id="btn4">将吃鸡放到上海的前面</button>
        <button  class = "btn" id="btn5">删除北京</button>
        <button  class = "btn" id="btn6">删除所有节点</button>
    </div>
    <ul class = "color" id = "sc">
        <li id="beijing">北京</li>
        <li id="shanghai">上海</li>
        <li id="zhengzhou">郑州</li>
        <li id="chiji">吃鸡</li>
        <li id="wangzherongyao">王者荣耀</li>
    </ul>
</body>
<script>

    //console.log("-----------将吃鸡放到所有城市后面------------")

    let chijiPN = document.getElementById("chiji").parentNode;
    let chiji = document.getElementById("chiji");


    let btn1 = document.getElementById("btn1");
    btn1.onclick = function () {
        let wangzherongyao = document.getElementById('wangzherongyao');
        chijiPN.insertBefore(chiji, wangzherongyao);
    }

    //console.log("----------------将吃鸡放到所有城市前面-----------------")  

    let btn2 = document.getElementById("btn2");
    btn2.onclick = function () {

        chijiPN.replaceChild(chiji, chijiPN.firstChild);
    }


    //console.log("----------------将吃鸡放到上海的后面-----------------") 

    let btn3 = document.getElementById("btn3");
    btn3.onclick = function () {
        let zhengzhou = document.getElementById("zhengzhou");


        chijiPN.insertBefore(chiji, zhengzhou);
    }


    //console.log("----------------将吃鸡放到上海的前面-----------------") 

    let btn4 = document.getElementById("btn4");
    btn4.onclick = function () {
        let shanghai = document.getElementById("shanghai");

        chijiPN.insertBefore(chiji, shanghai);
    }


    //console.log("----------------删除北京-----------------") 

    document.getElementById("btn5").onclick = function () {
        var node = document.getElementById("beijing");
        if (node.parentNode) {
            node.parentNode.removeChild(node);
        }

    }

    //console.log("-----------删除所有节点------------")


    document.getElementById("btn6").onclick = function () {
        var node = document.getElementById("sc");
        if (node.parentNode) {
            node.parentNode.removeChild(node);

        }
    }
</script>

</html>